<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>网站后台管理模版</title>
		<link rel="stylesheet" type="text/css" href="/static/admin/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="/static/admin/css/admin.css" />
	</head>
	<style>
	</style>
	<body>
		<div class="page-content-wrap">
			<div class="layui-tab" style="margin: 0;">
				<ul class="layui-tab-title">
					<li><a href="/data">数据列表</a></li>
					<li class="layui-this">数据详情</li>
				</ul>
				<div id="main-content layui-form">
					<div class="layui-tab-content col-lg-12">
						<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
							<legend>
								{{args.name}} 折线图
							</legend>
						</fieldset>
						<div class="layui-collapse">
							<div class="layui-colla-item">
                                <h2 class="layui-colla-title"><span>{{args.type}}的平均值</span><i class="layui-icon layui-colla-icon"></i>
                                <select name="" id="select-types" class="select-pz">
                                    {% for k in typesList %}
                                    <option {% if args.type == k%} selected {%endif%} value="{{k}}">{{k}}</option>
                                    {% endfor %}
                                </select>
                                <select name="" id="select-month" class="select-pz">
                                    <option value="0">所有</option>
                                    {% for k in monthList %}
                                    <option {% if args.month == k%} selected {%endif%} value="{{k}}">{{k}}月</option>
                                    {% endfor %}
                                </select>
								</h2>
								<div class="layui-colla-content layui-show">
									<div style="height: 600px;width:100%" id="chart_zx"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
            </div>
            <div id="main-content layui-form">
					<div class="layui-tab-content col-lg-12">
						<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
							<legend>
								{{args.name}} 柱形图
							</legend>
						</fieldset>
						<div class="layui-collapse">
							<div class="layui-colla-item">
                                <h2 class="layui-colla-title"><span>PM2.5的平均值</span><i class="layui-icon layui-colla-icon"></i>
								</h2>
								<div class="layui-colla-content layui-show">
									<div style="height: 600px;width:100%" id="chart_zxt"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-form-item" style="padding-left: 10px;">
				<div class="layui-input-block">
					<a href="/data_list/{{args.title}}/{{args.name}}/{{args.month}}" class="layui-btn layui-btn-primary">返回</a>
				</div>
			</div>
		</div>
		<script src="/static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/admin/js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/admin/js/echarts.js" type="text/javascript" charset="utf-8"></script>
		<script>
			
			layui.use(['form', 'jquery', 'laydate', 'layer', 'laypage', 'dialog',  'element', 'upload', 'layedit'], function() {
				var layer = layui.layer,
					$ = layui.jquery;
				var element = layui.element();

				//获取当前iframe的name值
				var iframeObj = $(window.frameElement).attr('name');

				// var title = getQueryVariable('id');
			});
			var data = '{{data}}';
			data = data.replace(/&#34;/g,'"');
            data = JSON.parse(data);
            console.log(data)
            var name = "{{args.name}}",msg;
            var types = "{{args.type}}";
            console.log(types);
            var mon = "{{args.month}}"
            var chartDom = document.getElementById('chart_zx');
            var myChart = echarts.init(chartDom);
            var optionChart1 = getOptionZX(msg);
            xData = [];
            yData = [];
            for(var i in data){
                xData.push(i);
                switch(types){
                    case 'PM25':
                        if(mon == "0"){
                            yData.push(data[i].PM25);
                        }else{
                            yData.push(data[i].dayPM25);
                        }
                        break;
                    case 'SO2':
                        if(mon == "0"){
                            yData.push(data[i].SO2);
                        }else{
                            yData.push(data[i].daySO2);
                        }
                        break;
                    case 'NO':
                        if(mon == "0"){
                            yData.push(data[i].NO);
                        }else{
                            yData.push(data[i].dayNO);
                        }
                        break;
                    case 'NO2':
                        if(mon == "0"){
                            yData.push(data[i].NO2);
                        }else{
                            yData.push(data[i].dayNO2);
                        }
                        break;
                    case 'NOx':
                        if(mon == "0"){
                            yData.push(data[i].NOx);
                        }else{
                            yData.push(data[i].dayNOx);
                        }
                        break;
                    case 'O3':
                        if(mon == "0"){
                            yData.push(data[i].O3);
                        }else{
                            yData.push(data[i].dayO3);
                        }
                        break;
                    case 'CO':
                        if(mon == "0"){
                            yData.push(data[i].CO);
                        }else{
                            yData.push(data[i].dayCO);
                        }
                        break;
                    case 'PM10':
                        if(mon == "0"){
                            yData.push(data[i].PM10);
                        }else{
                            yData.push(data[i].dayPM10);
                        }
                        break;
                }
                
                
            }
            optionChart1.xAxis = {
                type: 'category',
                data: xData
            };
            optionChart1.series[0].data = yData;
            optionChart1 && myChart.setOption(optionChart1);

            var chartDom = document.getElementById('chart_zxt');
            var myChart2 = echarts.init(chartDom);
            var optionChart2 = getOptionZXT(msg);
            optionChart2.xAxis = {
                type: 'category',
                data: xData
            };
            optionChart2.series[0].data = yData;
            optionChart2 && myChart2.setOption(optionChart2);

            $('#select-month').on('change',function(){
                // console.log($(this).val());
                location.href = '/data_list_charts/{{args.title}}/{{args.name}}/'+$(this).val()+'/'+types;
            })
            $('#select-types').on('change',function(){
                location.href = '/data_list_charts/{{args.title}}/{{args.name}}/{{args.month}}/'+$(this).val();
            })
			function getOptionBT(text)
			{
				var option = {};
				option = {  //饼图样式
					title: {
						text: text,
						subtext: '',
						left: 'center'
					},
					xAxis:{
						show:false
					},
					yAxis:{
						show:false
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left',
					},
					series: [
						{
							name: 'PM2.5平均值',
							type: 'pie',
							radius: '50%',
							data: [],
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}
					]
				};
				return option;
			}
			function getOptionZXT(text)
			{
				var option = {};
				option = {
					title: {
						text: text,
						subtext: '',
						left: 'center'
					},
					// 提示框
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'line',
							lineStyle: {
								color: '#7171C6'
							}
						}
					},
					xAxis:{
						type: 'category',
						data: '',
						name:'日期'
					},
					yAxis: {
						type: 'value',
					},
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar'
					}]
				};
				return option;
			}
			function getOptionZX(text)
			{
				var option = {}
				option = {
					title: {
						text: text,
						subtext: '',
						left: 'center'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'line',
							lineStyle: {
								color: '#7171C6'
							}
						}
					},
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
						name:'月份',  
					},
					yAxis: {
						type: 'value',
					},
					series: [{
						data: [150, 230, 224, 218, 135, 147, 260],
						type: 'line'
					}]
				};
				return option;
			}
		</script>
	</body>

</html>